const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

// 所有的配置信息
module.exports = {
    // 指定入口文件
    entry: "./src/index.ts",
    // 指定打包文件所在的目录
    output: {
        // 指定打包文件的目录
        path:path.resolve(__dirname,'dist'),
        // 打包后文件的文件名
        filename: 'bundle.js',
        // 不让webpack使用箭头函数   用于兼容ie
        environment:{
            arrowFunction:false
        }
    },
    mode:'development',
    // 指定打包时使用的模块
    module:{
        // 指定要加载的规则
        rules: [
           {
               test:/\.ts$/,
               use: [
                   {
                       loader:"babel-loader",
                       options:{
                           presets: [
                               [
                                   "@babel/preset-env",
                                   {
                                       targets: {
                                           "chrome":'88'
                                       },
                                       "corejs":"3",
                                       "useBuiltIns":"usage"
                                   }
                               ]
                           ]
                       }
                   },
                   "ts-loader"
               ]
           },
            {
                test:/\.less$/,
                use:[
                    "style-loader",
                    "css-loader",
                    {
                        loader:'postcss-loader',
                        options: {
                            postcssOptions: {
                                plugins:[
                                    [
                                        "postcss-preset-env",
                                        {
                                            browsers: "last 2 versions"
                                        }
                                    ]
                                ]
                            }
                        }
                    },
                    "less-loader"
                ]
            }
        ]
    },
    // 配置webpack插件
    plugins:[
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            // 指定输出的huml文件
            template: "./index.html"
        }),
    ],
    // 用来设置引用模块
    resolve: {
        extensions: ['.ts','.js']
    }
}